// import { createElement } from 'react';
import diff from './diff.js';
import patch from './patch';
import {createElement, renderDOM,render} from './element.js';
// 跳过JSX-> 编译过程
{/* <ul className="list">
  <li className="item">周杰伦</li>
  <Home />
  <li className="item">王俊凯</li>
  <li className="item">王力宏</li>
</ul> */}
let virtualDOM=createElement('ul',{class:'list',value:2},[
  createElement('li',{class:'item'},['周杰伦']),
  createElement('li',{class:'item'},['王俊凯']),
  createElement('li',{class:'item'},['王力宏']),
])

let virtualDOM2=createElement('ul',{class:'list-group'},[
  createElement('li',{class:'item'},['周杰']),
  createElement('li',{class:'item'},['王凯旋']),
  createElement('li',{class:'item',value:'lh'},['王力宏']),
  createElement('li',{class:'item'},['阿妹']),
])

// 比较两棵虚拟DOM树，找出差异(diff)，交给浏览器 diff 算法+树的遍历

console.log(virtualDOM);

let el=render(virtualDOM);// 渲染 内存中 document.createElement(tag)
// Element树->Tag树
console.log(el);
renderDOM(el,document.getElementById('root'))
let patches=diff(virtualDOM,virtualDOM2);// 比较
// 新的DOM 上的页面 
// 
console.log(patches);
// 去旧虚拟DOM 生成的界面上打补丁
patch(el,patches)